@charset "utf-8";
@import "reset";
@import "_commonality";

.wrap{
    main{
        .brief{
            padding-bottom: 65px;
            .brief-left{
                .brief-left-title{
                    margin-top: 93px;
                    .title{
                        p{
                            font-size: 36px;
                            color: #2a2a2a;
                            margin-bottom: 30px;
                        }
                        span{
                            font-size: 21px;
                            color: #2a2a2a;
                        }
                    }
                }

                .brief-left-text{
                    margin-top: 30px;
                    p{
                        font-size: 14px;
                        color: #2a2a2a;
                        line-height: 30px;
                        text-indent: 2em;
                        margin-bottom: 20px;
                        letter-spacing: 2px;

                        &:last-of-type{
                            margin-bottom: 0;
                        }
                    }
                }
            }

            .brief-right{
                .brief-right-img{
                    padding-top: 235px;
                }
            }
        }

        .invite{
            background-color: #8cc11f;
            padding-bottom: 82px;
            .invite-left{
                .title{
                    margin-top: 115px;
                    p{
                        font-size: 36px;
                        color: #fff;
                    }
                }

                .text{
                    margin-top: 60px;
                    p{
                        font-size: 16px;
                        color: #fff;
                        line-height: 30px;
                        margin-bottom: 20px;
                    }

                    span{
                        font-size: 16px;
                        color: #fff;
                        line-height: 30px;
                    }
                }
            }

            .invite-right{
                .invite-right-text{
                    margin-top: 229px;
                    span{
                        font-size: 16px;
                        line-height: 30px;
                        color: #fff;
                    }

                    .src{
                        width: 220px;
                        height: 48px;
                        background-color: #fff;
                        text-align: center;
                        line-height: 48px;
                        color: #8cc11f;
                        font-size: 24px;
                        margin: 15px 0;
                    }
                }
            }
        }

        .exploit{
            .exploit-main{
                padding-bottom: 65px;
                border-bottom: 1px solid #d2d2d2;
                .title{
                    margin-top: 72px;
                    p{
                        font-size: 26px;
                        line-height: 30px;
                        color: #8cc11f;
                    }

                }

                .TITLE{
                    margin-top: 122px;
                }
                .text-list{
                    margin-top: 40px;
                    .text-one{
                        display: flex;
                        flex-direction: column;
                        p{
                            font-size: 18px;
                            line-height: 30px;
                            color: #2a2a2a;
                        }
    
                        span{
                            font-size: 14px;
                            line-height: 34px;
                            color: #2a2a2a;
                            text-indent: 2em;
                        }
                    }
                    .text-two{
                        margin-top: 15px;
                        display: flex;
                        flex-direction: column;
                        p{
                            font-size: 18px;
                            line-height: 30px;
                            color: #2a2a2a;
                        }
    
                        span{
                            font-size: 14px;
                            line-height: 34px;
                            color: #2a2a2a;
                            text-indent: 2em;
                        }
                    }
                }
            }
        }

        .relation{
            background-color: #f4f4f4;
            padding-top: 45px;
            padding-bottom: 62px;

            h2{
                font-size: 36px;
                color: #2a2a2a;
            }
            .relation-left{
                .relation-left-box{
                    background-color: #fff;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 12px 29px 21px 21px;
                    margin-top: 40px;
                    .relation-left-img{
                        width: 70px;
                        margin-right: 10px;
                    }
                    span{
                        font-size: 16px;
                        color: #2a2a2a;
                    }
                }

                .two{
                    margin-top: 20px;
                }
            }

            .relation-right{
                .relation-right-box{
                    background-color: #fff;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    padding: 12px 29px 21px 21px;
                    margin-top: 40px;
                    .relation-right-img{
                        width: 70px;
                        margin-right: 10px;
                    }
                    span{
                        font-size: 16px;
                        color: #2a2a2a;
                    }
                }

                .two{
                    margin-top: 20px;
                }
            }
        }

    }
}

@media all and (max-width:991px) {
    .wrap{
        header{
            .navbar{
                .navbar-collapse{
                    .navbar-nav{
                        li{
                            a{
                                padding: 15px 3px;
                            }
                        }
                    }
                }
            }
        }

        main{
            .brief{
                .brief-right{
                    .brief-right-img{
                        padding-top: 50px;
                    }
                }
            }

            .invite{
                .invite-left{
                    .title{
                        margin-top: 50px;
                    }
                }

                .invite-right{
                    .invite-right-text{
                        margin-top: 50px;
                    }
                }
            }

            .exploit{
                .exploit-main{
                    .TITLE{
                        margin-top: 50px;
                    }
                }
            }
        }
    }
    
}

@media all and (max-width:767px) {
    .wrap{
        main{
            .brief{
                .brief-left{
                    .brief-left-title{
                        margin-top: 30px;
                    }
                }
            }

            .exploit{
                .exploit-main{
                    padding-bottom: 30px;
                    .title{
                        margin-top: 30px;
                    }
                }
            }
        }

        footer{
            .row{
                .container-text-top{
                    ul{
                        display: flex;
                        justify-content: space-around;
                    }
                }
                .container-logo{
                    display: flex;
                    justify-content: space-around;
                }
            }
            
        }
    }
    
}